/*
 * @Author: 报价筛选条件
 * @Date: 2021-03-19 10:19:07
 * @LastEditTime: 2022-09-14 09:41:50
 * @LastEditors: 最后一次编辑说明
 * @Description: In User Settings Edit
 * @FilePath: \adminc:\Users\dell\Desktop\react (1)\新建文件夹\react\src\components\offer\priceTerms.jsx
 */
import React, { Component } from 'react'
import { Picker, Icon, Button } from 'antd-mobile';
import '../css/priceTerms.scss';
let oldOilFactoryList = [];// 选中前的油厂
class PriceTerms extends Component {
  constructor(props) {
    super(props);
    this.state = {
      regionalAndOilFactorylist: [],// 获取大区油厂
      deliveryTimelist: [],// 时间列表
      packageMethodlist: [],// 包装规格列表
      proteinLevelList: [],// 蛋白列表
      regionalId: [],// 选中的大区
      packageMethodVOList: [''],// 选中的包装
      proAttributeVOList: [''],// 选中的蛋白
      loadEndTimeId: [''],// 选中的提货日期
      showActiveAttr: {
        regional: {},// 油厂
        proAttribute: {},//蛋白
        packageMethod: {},// 包装
        loadEndTime: {},// 提货日期
      },
      isShowOil: false
    }
    this.setPriceTermsData = props.setPriceTermsData;
  }
  componentDidMount() {
    this.getSeletList()
  }
  // 监听组件传递的值：
  componentWillReceiveProps(newProps) {
    // 参数为给组件传递的参数
    // console.log(newProps)
  }
  // 监听组件内部状态的变化:
  componentDidUpdate(prevProps, prevState) {
    if (
      prevState.regionalId.join() != this.state.regionalId.join() ||
      prevState.packageMethodVOList.join() != this.state.packageMethodVOList.join() ||
      prevState.proAttributeVOList.join() != this.state.proAttributeVOList.join() ||
      prevState.loadEndTimeId.join() != this.state.loadEndTimeId.join()
    ) {
      this.setPriceTermsData(this.state.showActiveAttr);
    }
  }
  // 获取大区、油厂
  getRegionalAndOilFactory = () => {
    $http.get('QUERYREGIONALANDOILFACTORY').then(res => {
      let regionalAndOilFactorylist = [];
      ((res.code == 200 && res.ret && res.ret.data) || []).filter(item => {
        regionalAndOilFactorylist.push({
          value: item.id,
          label: item.regionalName,
          oilFactoryList: [{
            id: '',
            shortName: "全部油厂"
          }, ...(item.oilFactoryList || [])]
        });
      });
      // console.log(regionalAndOilFactorylist)
      this.setState({
        regionalAndOilFactorylist: regionalAndOilFactorylist
      })
    })
  }

  // 获取豆粕筛选条件(蛋白、包装、提货日期)
  getSeletList = async () => {
    try {
      await this.getRegionalAndOilFactory();
      let res = await $http.get('QUERYSELECTLIST');
      if (res.code == 200 && res.ret) {
        let proteinLevelList = [{
          label: '全部蛋白',
          value: '',
        }],// 蛋白
          packageMethodlist = [{
            label: '全部包装',
            value: '',
          }],//包装
          deliveryTimelist = [{
            label: '全部时间',
            value: '',
          }];//提货时间
        res.ret.proteinLevelList.map(item => {
          proteinLevelList.push({
            label: item.attributeVal,
            value: item.id,
          })
        });
        res.ret.packageMethodlist.map(item => {
          packageMethodlist.push({
            label: item.attributeVal,
            value: item.id,
          })
        });
        res.ret.deliveryTimelist.map(item => {
          deliveryTimelist.push({
            label: item.showName,
            value: item.id,
          })
        });



        this.setState({
          deliveryTimelist: deliveryTimelist || [],// 时间列表
          packageMethodlist: packageMethodlist || [],// 包装规格列表
          proteinLevelList: proteinLevelList || [],// 蛋白列表
          regionalId: [res.ret.proSelectRecordVO.regionalId || 2],// 选中的大区
          proAttributeVOList: [res.ret.proSelectRecordVO.oilFactoryIds || ''],//选中的蛋白
          packageMethodVOList: [res.ret.proSelectRecordVO.packageMethodId || ''],//选中的包装
          loadEndTimeId: [res.ret.proSelectRecordVO.deliveryTimeConfigId || ''],//选中的提货日期
          showActiveAttr: {
            regional: {},// 油厂
            proAttribute: proteinLevelList.filter(item => {
              return item.value == res.ret.proSelectRecordVO.proteinLevelId
            })[0] || {
              label: '全部蛋白',
              value: '',
            },//蛋白
            packageMethod: packageMethodlist.filter(item => {
              return item.value == res.ret.proSelectRecordVO.packageMethodId
            })[0] || {
              label: '全部包装',
              value: '',
            },// 包装
            loadEndTime: deliveryTimelist.filter(item => {
              return item.value == res.ret.proSelectRecordVO.deliveryTimeConfigId
            })[0] || {
              label: '全部日期',
              value: '',
            },// 提货日期
          },
        });
        this.setRegional(this.state.regionalId);
        this.state.showActiveAttr.regional.oilFactoryList.map(item => {
          if ((res.ret.proSelectRecordVO.regionalId || '').split(',').includes(String(item.id))) {
            item['check'] = !item['check'];
            item['sortIndex'] = item['check'] ? 1 : 0;
          }
        }).sort((a, b) => {
          return (b.sortIndex || 0) - (a.sortIndex || 0)
        });
        this.setState({})
      }

    } catch (error) {

    }
  }
  // 大区选中
  setRegional = (e) => {
    this.setState({
      regionalId: e,
      showActiveAttr:
        Object.assign(this.state.showActiveAttr, {
          regional: this.state.regionalAndOilFactorylist.filter(item => {
            return item.value == e[0];
          })[0] || {}
        })
    });

  }

  // 油厂选中
  setOil = (e, type) => {
    this.state.showActiveAttr.regional.oilFactoryList.map((item, index) => {
      if (e.id) {
        if (index == 0) {
          item['check'] = false;
          item['sortIndex'] = 2;
        }
        if (item.id == e.id) {
          item['check'] = !item['check'];
          item['sortIndex'] = item['check'] ? 1 : 0;
        }
      } else {
        if (index == 0) {
          item['check'] = true;
          item['sortIndex'] = 2;
        } else {
          item['check'] = false;
          item['sortIndex'] = 0;
        }
      }
    });
    if (type) {
      this.confimOil(type);
    }
    this.setState({})
  }
  // 清空选中的油厂
  clearOil = () => {
    this.state.showActiveAttr.regional.oilFactoryList = JSON.parse(oldOilFactoryList);
    this.setState({});
    this.setShowOil()
  }
  // 确认选中油厂值
  confimOil = (type) => {
    this.state.showActiveAttr.regional.oilFactoryList.sort((a, b) => {
      return (b.sortIndex || 0) - (a.sortIndex || 0)
    })
    this.setState({});
    oldOilFactoryList = JSON.stringify(this.state.showActiveAttr.regional.oilFactoryList);
    if (type != 1) {
      this.setShowOil()
    }
    this.setPriceTermsData(this.state.showActiveAttr);
  }
  // 设置值蛋白
  setProAttribute = (e) => {

    this.setState({
      proAttributeVOList: e,
      showActiveAttr:
        Object.assign(this.state.showActiveAttr, {
          proAttribute: this.state.proteinLevelList.filter(item => {
            return item.value == e[0];
          })[0] || {}
        })

    });
    // this.setPriceTermsData(this.state)
  }
  // 设置值包装
  setPackageMethod = (e) => {
    this.setState({
      packageMethodVOList: e,
      showActiveAttr:
        Object.assign(this.state.showActiveAttr, {
          packageMethod: this.state.packageMethodlist.filter(item => {
            return item.value == e[0];
          })[0] || {}
        })

    });
    // this.setPriceTermsData(this.state)
  }// 设置值提货日期
  setLoadEndTimeId = (e) => {
    this.setState({
      loadEndTimeId: e,
      showActiveAttr:
        Object.assign(this.state.showActiveAttr, {
          loadEndTime: this.state.deliveryTimelist.filter(item => {
            return item.value == e[0];
          })[0] || {}
        })

    });
    // this.setPriceTermsData(this.state)
  }
  // 油厂显示
  setShowOil = () => {
    this.setState({
      isShowOil: !this.state.isShowOil
    });
    oldOilFactoryList = JSON.stringify(this.state.showActiveAttr.regional.oilFactoryList);

  }
  render(h) {
    const data = this.state, quickOil = [0, 1, 2, 3];
    return (
      <div id='PRICETERMS' >
        <div className='PT-select flex'>
          <div className='PT-item flex'>
            <Picker data={data.regionalAndOilFactorylist} cols={1} value={data.regionalId} onChange={this.setRegional}>
              <span className='PT-val flex'>{data.showActiveAttr.regional.label || '油厂'}<Icon type="down" /></span>
            </Picker>
          </div>
          <div className='PT-item flex'>
            <Picker data={data.proteinLevelList} cols={1} value={data.proAttributeVOList} onChange={this.setProAttribute}>
              <span className='PT-val flex'>{data.showActiveAttr.proAttribute.label || '蛋白列表'}<Icon type="down" /></span>
            </Picker>
          </div>
          <div className='PT-item flex'>
            <Picker data={data.packageMethodlist} cols={1} value={data.packageMethodVOList} onChange={this.setPackageMethod}>
              <span className='PT-val flex'>{data.showActiveAttr.packageMethod.label || '包装列表'}<Icon type="down" /></span>
            </Picker>
          </div>
          <div className='PT-item flex'>
            <Picker data={data.deliveryTimelist} cols={1} value={data.loadEndTimeId} onChange={this.setLoadEndTimeId}>
              <span className='PT-val flex'>{data.showActiveAttr.loadEndTime.label || '提货日期'}<Icon type="down" /></span>
            </Picker>
          </div>
        </div>
        <div className='PT-oil'>
          <div className={`PT-oil-quick flex ${data.isShowOil ? 'PT-oil-allShow' : ''}`}>
            {
              quickOil.map((item, index) => {
                if (data.showActiveAttr.regional.oilFactoryList && data.showActiveAttr.regional.oilFactoryList[item]) {
                  return <span className={`PT-oil-item ${data.showActiveAttr.regional.oilFactoryList[item].check ? 'PT-oil-active' : ''}`} key={item} onClick={() => { this.setOil(data.showActiveAttr.regional.oilFactoryList[item], 1) }}>{data.showActiveAttr.regional.oilFactoryList[item].shortName}<Icon type="check" className='PT-oil-icon' /></span>
                }
              })
            }
            <div className='PT-oil-allIcon flex' onClick={
              this.setShowOil
            }>
              <Icon type='ellipsis'></Icon>
            </div>
          </div>
          <div className={`PT-oil-all  ${data.isShowOil ? 'flex' : 'none'}`}>
            {
              (data.showActiveAttr.regional.oilFactoryList || []).map((item, index) => {
                return <span className={`PT-oil-item ${item.check ? 'PT-oil-active' : ''}`} key={index} onClick={() => { this.setOil(item) }}>{item.shortName}<Icon type="check" className='PT-oil-icon' /></span>
              })
            }
            <div className='PT-oil-btn flex'>
              <Button className='flex' onClick={this.clearOil}>清空</Button>
              <Button type="primary" className='flex' onClick={this.confimOil}>确定</Button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default PriceTerms;